<template>
    <div class="page-wrap">
        <h2>以行为单位，轮播展示文本信息，支持自定义样式和插槽</h2>
        <h3>数据结构</h3>
        <div>
            <el-input type="textarea" :rows="4" placeholder="请输入内容" :value="code">
            </el-input>
        </div>
        <h3>基本使用</h3>
        <div>
            <el-input type="textarea" :rows="2" placeholder="请输入内容" :value="code2">
            </el-input>
        </div>
        <h3 style="color: #409EFF;">效果</h3>
        <div>
            <el-textRow-carousel :data="msgList"></el-textRow-carousel>
        </div>
        <h3>参数</h3>
        <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="name" label="参数" width="180">
            </el-table-column>
            <el-table-column prop="type" label="数据类型" width="180">
            </el-table-column>
            <el-table-column prop="description" label="说明">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import elTextRowCarousel from '@/components/el-textRow-carousel.vue'
export default{
    components: {
        elTextRowCarousel
    },
    data(){
        return {
            msgList: [
                "日检：完成比例：0% / 未完成比例：100% / 点检异常比例：0%",
                "周检：完成比例：1.2% / 未完成比例：98.8% / 点检异常比例：0%"
            ],

            code: ` msgList: [
                "日检：完成比例：0% / 未完成比例：100% / 点检异常比例：0%",
                "周检：完成比例：1.2% / 未完成比例：98.8% / 点检异常比例：0%"
            ]`,
            code2: "<el-textRow-carousel :data='msgList'></el-textRow-carousel>",

            tableData: [
                {
                    name: "data", type: "Array",
                    description: "要展示的信息列表，由文本行组成的一维数组"
                },
                {
                    name: "interval", type: "Number",
                    description: "轮播间隔（毫秒），默认3000"
                },
                {
                    name: "rowStyle", type: "Object",
                    description: "行自定义样式，可以自定义字体大小，颜色，边距等"
                }
            ]
        }
    }
}
</script>

<style scoped>
.page-wrap{
    padding: 20px;
}
.page-wrap h2{
    margin-top: 0;
}
</style>